<template>
	<div class="chat_div">
		<!-- 标题栏 - 好友的信息 -->
		<div class="title_cls">
			{{friend.nickname}}
		</div>
		
		<!-- 消息展示区域 -->
		<div ref="msg_ref" class="msg_cls">
			
			<!-- 一条消息  -->
			<div class="msg_items" v-for="msg in messages">
				<!-- 时间 -->
				<div v-if="msg.showTime" style="margin: 20px;">
					<span style="background-color: lightgray; color: white; font-size: 12px;
						padding: 2px 8px; border-radius: 10px;">
						<!-- 2024年01月17日 18:14:00 -->
						{{fordateTime(msg.sendTime)}}
					</span>
				</div>
				
				<!-- 消息内容 对方发送过来的消息 -->
				<div v-if="msg.uid != uid" style="display: flex; padding: 10px; box-sizing: border-box;">
					<el-image :src="$.getImg(msg.header)" class="header_cls3" fit="cover"></el-image>
					<div style="display: flex; flex-direction: column; align-items: flex-start; margin-left: 10px;">
						<span>{{friend.nickname}}</span>
						<!-- 实际的消息内容 -->
						<div v-if="msg.type == 1" class="msg_content_div">
							<!-- 文本消息 -->
							{{msg.content}}
						</div>
						<div v-else class="msg_content_div">
							<!-- 图片消息 -->
							<el-image :src="$.getImg(msg.content)"></el-image>
						</div>
					</div>
				</div>
				<!-- 消息内容 我发送出去 -->
				<div v-else style="display: flex; flex-direction: row-reverse; padding: 10px; box-sizing: border-box;">
					<el-image :src="$.getImg(msg.header)" class="header_cls3" fit="cover"></el-image>
					<div style="display: flex; flex-direction: column; align-items: flex-end; margin-right: 10px;">
						<!-- 实际的消息内容 -->
						<div v-if="msg.type == 1" class="msg_content_div" style="margin: 0px; background-color: #7FC051; color: white;">
							<!-- 文本消息 -->
							{{msg.content}}
						</div>
						<div v-else class="msg_content_div" style="margin: 0px; background-color: #7FC051; color: white;">
							<!-- 图片消息 -->
							<el-image :src="$.getImg(msg.content)"></el-image>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 工具栏 -->
		<div class="tool_cls">
			<el-upload
			  :action="$.host + '/file/upload'"
			  :show-file-list="false"
			  :on-success="imgsendsucc">
				<i class="el-icon-picture-outline"></i>
			</el-upload>
			<i class="el-icon-video-camera"></i>
		</div>
		
		<!-- 输入框 -->
		<div class="input_cls">
			<textarea
				v-model="textarea"
				placeholder="请输入内容"
				class="el_input_cls"
				@keyup.enter="sendMsg">
			</textarea>
			
			<el-button style="position: absolute; bottom: 10px; right: 10px;" 
				type="success" @click="sendMsg">发送</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			//当前页面正在聊天的好友id
			fid: {
				type: Number
			}
		},
		data() {
			return {
				//需要发送的内容
				textarea: "",
				header: require("@/assets/header.png"),
				//记录最后一条消息的发送时间 - 毫秒值
				endTime: 0,
				//当前的用户id
				uid: this.$.getUser().id,
				//好友的具体信息
				friend: null,
				//多条消息
				/**
				{
					//发送者id
					uid: "",
					//消息的发送时间
					sendTime: 0,
					//消息类型 1-文本 2-图片
					type: 1,
					//消息的内容
					content: "",
					//是否显示时间
					showTime: false
				}
				 */
				messages: []
			}
		},
		methods: {
			//发送图片消息
			imgsendsucc(resp){
				
				//图片的消息
				var msgObj = {
					action: 101,
					from: this.uid,
					to: this.friend.fid,
					type: 2,
					content: resp
				}
				
				this.$ws.sendMsg(msgObj);
				
				//展示到自己的聊天框
				var msgInfo = {
					uid: this.$.getUser().id,
					sendTime: new Date().getTime(),
					type: 2,
					content: resp
				};
				
				this.addMsg(msgInfo);
			},
			//是否展示发送时间
			isShowTime(sendTime){
				if(sendTime - this.endTime >= (5 * 60 * 1000)){
					this.endTime = sendTime;
					return true;
				}
				return false;
			},
			//格式化时间根据毫秒值
			fordateTime(time){
				var t = new Date(time);
				var y = t.getFullYear();
				var m = t.getMonth() + 1;
				var d = t.getDate();
				var h = t.getHours();
				var mi = t.getMinutes();
				var s = t.getSeconds();
				return y + "年" + m + "月" + d + " " + h + ":" + mi + ":" + s;
			},
			//添加消息
			/*
			{
				//发送者id
				uid: "",
				//消息的发送时间
				sendTime: 0,
				//消息类型 1-文本 2-图片
				type: 1,
				//消息的内容
				content: ""
			}
			*/
			addMsg(msg){
				console.log("调用了添加消息项的方法......", msg, this.friend);
				
				if(msg.uid != this.uid && msg.uid != this.friend.fid){
					//当前页面没有在和这个用户聊天，就不展示
					return false;
				}
				
				//根据消息的uid 获取当前用户的头像
				if(msg.uid == this.uid){
					//发出去的消息，头像用当前用户的头像
					msg.header = this.$.getUser().header;
				} else {
					//好友发过来的消息，头像用好友的头像
					msg.header = this.friend.header;
				}
				
				//判断是否需要显示时间
				msg.showTime = this.isShowTime(msg.sendTime);
				//将修改过后的消息放入消息队列
				this.messages.push(msg);
				
				setTimeout(() => {
					//滚动条置底
					let e = this.$refs.msg_ref; //获取的dom元素
					e.scrollTop = e.scrollHeight;
				},100);
				
				return true;
			},
			//发送消息
			sendMsg(){
				if(this.textarea.trim() == "") {
					this.$message({
						message: "不能发送空消息",
						type: "info"
					})
					return; 
				}
				
				//发送消息
				//通过websocket将消息发给服务器
				var msgObj = {
					action: 101,
					from: this.uid,
					to: this.friend.fid,
					type: 1,
					content: this.textarea
				}
				this.$ws.sendMsg(msgObj);
				
				
				//展示到自己的聊天框
				var msgInfo = {
					uid: this.$.getUser().id,
					sendTime: new Date().getTime(),
					type: 1,
					content: this.textarea
				};
				
				this.addMsg(msgInfo);
				//清空文本域
				this.textarea = "";
				
				//缓存消息
				this.$.saveMsgList(this.friend.fid, msgInfo);
			},
			//初始化聊天的方法
			initChat(){
				//根据好友id查询好友基本信息
				this.friend = this.$.getFriendInfo(this.fid);
				//清空聊天列表
				this.messages = [];
				//读取当前好友的历史聊天记录
				this.messages = this.$.getMsgList(this.friend.fid);
				
				//展示头像
				this.messages.forEach((msg) => {
					//根据消息的uid 获取当前用户的头像
					if(msg.uid == this.uid){
						//发出去的消息，头像用当前用户的头像
						msg.header = this.$.getUser().header;
					} else {
						//好友发过来的消息，头像用好友的头像
						msg.header = this.friend.header;
					}
				});
				
				//置底
				setTimeout(() => {
					//滚动条置底
					let e = this.$refs.msg_ref; //获取的dom元素
					e.scrollTop = e.scrollHeight;
				},100);
			}
		},
		mounted() {
			// this.initChat();
		}
	}
</script>

<style>
	.chat_div {
		display: flex;
		flex-direction: column;
	}
	
	
	.title_cls {
		width: 100%;
		height: 40px;
		min-height: 40px;
		background-color: gray;
		display: flex;
		align-items: center;
		color: aliceblue;
		font-size: 16px;
		padding-left: 30px;
	}
	
	.msg_cls {
		flex-grow: 1;
		background-color: white;
		overflow: auto;
	}
	
	.tool_cls {
		border-top: 1px solid darkgray;
		height: 30px;
		min-height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.tool_cls i {
		margin-left: 20px;
		font-weight: 900;
		cursor: pointer;
	}
	
	.input_cls {
		height: 200px;
		min-height: 200px;
		position: relative;
	}
	
	.el_input_cls {
		border: 0px;
		width: 100%;
		height: 100%;
		padding: 20px 10px;
		box-sizing: border-box;
		resize: none;
	}
	
	.el_input_cls:focus {
		outline:none;
	}
	
	.msg_items {
		height: auto;
		width: 100%;
	}
	
	.header_cls3 {
		width: 50px;
		height: 50px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.msg_content_div {
		margin-top: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		padding: 10px;
		border-radius: 10px;
		max-width: 300px;
		width: auto;
		word-break: break-all;
		text-align: left;
	}
	
	
	::-webkit-scrollbar {
	  background: transparent;
	  width: 10px;
	}
	
	::-webkit-scrollbar-thumb {
	  background-color: #efefef;
	  border-radius: 5px;
	}
</style>